<template>
	<view>
		<nv ref="nv" :config="nvConfig" @nvAddressTap="chose_address" @input_click="input_click"></nv>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="swiper_box u-skeleton">
				<!-- banner 背景 -->
				<swiper class="u-skeleton-fillet home_swiper" :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="600" acceleration circular>
					<swiper-item class="home_swiper-item" v-for="(item, index) in index_data.banner_list" :key="index"
						@click="goto_details(item)">
						<u-image width="750" height="750" :src="item.imgurl" :lazy-load="true" :fade="true"
							mode="aspectFit"
							duration="300">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<!-- <image class="home_swiper-img" mode='center' :src="item.imgurl"></image> -->
					</swiper-item>
				</swiper>
				<!-- 搜索栏 -->
				<HomeSearch @input_click="input_click" @chose_address="chose_address" class="u-skeleton-fillet">
				</HomeSearch>
			</view>

			<!-- vip novip 检索 -->
			<view class="u-flex u-padding-left-30 u-padding-right-25 u-padding-top-30 u-padding-bottom-0 u-row-between">
				<LoginButton @click="goto_search(1)">
					<view class="vip_button u-flex-col u-col-center u-row-center"><text
							class="vip_button_text">会员免费住</text></view>
				</LoginButton>
				<view @click="goto_search(0)" class="vip_button_no u-flex-col u-col-center u-row-center"><text
						class="vip_button_text">美宿特卖</text></view>
			</view>

			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="600" acceleration circular
			class="u-margin-top-30"
				style="height: 200rpx;">
				<swiper-item v-for="(item , index) in index_data.banner_middle" :key='index' @click="goto_details(item)">
					<view class="swiper-item u-flex u-row-center">
						<u-image width="690" height="200" :src="item.imgurl" :lazy-load="true" :fade="true"
							border-radius='10' duration="300">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
				</swiper-item>
			</swiper>



			<view class="public-title-bar">
				<!-- {{vuex_address_dafauflt.region_name}} 市-->
				热门房源
			</view>

			<!-- tab 切换 与骨架屏 -->
			<HomeTab :region_list="index_data.region_list" :house_list="index_data.house_list"></HomeTab>

			<!-- 双 banner 省略 -->
			<view class="public-title-bar">游玩攻略</view>
			<!-- 瀑布流 -->
			<HomeWaterfall ref="HomeWaterfall" :art_list="idnex_data.art_list"></HomeWaterfall>
		</mescroll-body>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<u-toast ref="uToast" :icon="false" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import HomeWaterfall from '@/components/home-waterfall/home-waterfall.vue';
	import HomeSearch from '@/components/home-search/home-search.vue';
	import HomeTab from '@/components/home-tab/home-tab.vue';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import LoginButton from '@/components/login-button/index.vue';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		async onLoad() {
			await this.$onLaunched;
			this.init();
		},
		data() {
			return {
				loading: true,
				art_list: [], // 文章列表
				index_data: {
					banner_list: [], // banner
					region_list: [], // 搜索的地区
					house_list: [], // 房源列表
					banner_middle: []
				}, // 首页数据
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				nvConfig: {
					title: '首页',
					bgColor: '#ffffff',
					hideback: true,
					color: '#000000',
					type: 'search',
					closeCheckback: true,
					fixedAssist: {
						hide: true
					},
					search: {
						input: false
					},
					address: {
						province: '济南'
					},
					transparent: {
						initColor: '#000000',
						type: 'content', //全透明为'content',背景透明不传或填'background'
						anchor: uni.upx2px(750 - 100)
					}
				}
			};
		},
		methods: {
			goto_search(val) {
				this.$u.route({
					url: 'pages/search/index',
					params: {
						type: val
					}
				});
			},
			_articleList({
				pageNum = 1
			}) {
				this.$u.api
					.articleList({
						page: pageNum
					})
					.then(res => {
						// 存在瀑布流才会渲染
						this.art_list = this.art_list.concat(res.list);
						this.art_list.forEach(item => {
							item.uuid = item.id;
						});
						this.mescroll.endBySize(10, 10);
						this.$refs.HomeWaterfall.addRandomData(this.art_list);
					});
			},
			// 进入详情
			goto_details(item) {
				console.log(item);
				if (item.type * 1 == 0) {
					// 房源详情 pages/roomDetails/roomData
					this.$u.route({
						url: 'pages/roomDetails/index',
						params: {
							id: item.url,
						}
					})
				};
				if (item.type * 1 == 1) {
					// 文章详情
					this.$u.route({
						url: 'pages/article/index',
						params: {
							id: item.url,
						}
					})
				};
				if (item.type * 1 == 2) {
					// 外链 
					this.$u.route({
						url: 'pages/webView/webView',
						params: {
							url: item.url,
						}
					})
				};
			},
			// 点击 输入框
			input_click() {
				this.$u.route({
					url: 'pages/search/index',
					params: {}
				});
			},
			// 点击 地址按钮 TODO : 选择地址
			chose_address() {
				console.log('// 点击 地址按钮 TODO : 选择地址');
				this.$u.route({
					url: 'pages/regionalIndex/index',
					params: {
						from: 1
					}
				});
			},
			init() {
				this.$u.api.index({}).then(res => {
					this.index_data = res;
					setTimeout(() => {
						this.loading = false;
					}, 99);
				});
			},

			/*下拉刷新的回调, 有3种处理方式:*/
			downCallback() {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				setTimeout(() => {
					// this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				}, 999);
				// 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }

				let pageNum = page.num; // 页码, 默认从1开始
				// let pageSize = page.size; // 页长, 默认每页10条

				// 接口返回的当前页数据列表 (数组)
				// let curPageData = data.xxx;
				// let curPageLen = curPageData.length;
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)

				//设置列表数据
				// if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
				// this.dataList = this.dataList.concat(curPageData); //追加新数据
				// let totalSize = data.xxx;
				// let curPageLen =
				// this.mescroll.endBySize(curPageLen, totalSize);
				this._articleList({
					pageNum
				});
			}
		},
		computed: {
			...mapState({
				vuex_address_dafauflt: state => state.vuex_address_dafauflt
			})
		},
		watch: {
			vuex_address_dafauflt: {
				handler(val) {
					this.nvConfig.address.province = val.region_name;
					let params = {
						page: 1,
						region_id: val.id,
						count: 4
					};
					this.$u.api.search(params).then(res => {
						if (res.list.length !== 0) {
							this.index_data.house_list = res.list;
						} else {
							this.$refs.uToast.show({
								title: `暂无${val.region_name}房源`,
								type: 'warning',
								position: 'bottom'
							});
						}
					});
				}
			}
		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e);
		},
		components: {
			HomeSearch,
			HomeTab,
			HomeWaterfall,
			LoginButton
		}
	};
</script>

<style lang="scss" scoped>
	.vip_button_text {
		font-weight: 700;
		color: #ffffff;
		font-size: 40rpx;
	}

	.vip_button_no,
	.vip_button {
		width: 335rpx;
		height: 145rpx;
		border-radius: 30rpx;
	}

	.vip_button_no {
		background: linear-gradient(top, #fab6b6, #fcbd71);
	}

	.vip_button {
		background: linear-gradient(top, rgba(255, 106, 4, 0.95), rgba(255, 225, 117, 0.95));
	}

	.public-title-bar {
		// color: #000000;
		color: #333;
		margin-top: 30rpx;
		padding-left: 30rpx;
		font-weight: 700;
		font-size: 42rpx;
	}

	.swiper_box {
		width: 750rpx;
		position: relative;
		height: 750rpx;
	}

	.home_swiper-img {
		width: 750rpx;
		height: 750rpx;
	}

	.home_swiper {
		width: 750rpx;
		height: 750rpx;
		position: absolute;
	}

	.home_swiper-item {
		width: 750rpx;
	}
</style>
